<template>
    <div class="" style="background-color: #333742;">
        <div v-if="loading"
             class="loader-wrapper">
            <pulse-loader></pulse-loader>
        </div>

        <div class="container main-container has-text-white">

          <div class="modal" id="submit-modal">
            <div class="modal-background"></div>
            <div class="modal-card">
              <header class="modal-card-head">
                <p class="modal-card-title">提交快讯</p>
                <button class="delete" aria-label="close" @click="hideSubmit()"></button>
              </header>
              <section class="modal-card-body">
                <label class="label">标题</label>
                <div class="control">
                  <input id="post-title" class="input" type="text" placeholder="标题">
                </div>
                <label class="label" style="margin-top: 1rem;">内容</label>
                <textarea class="textarea" id="post-content" rows="2" type="text" placeholder="发快讯, 送EOS~" width="50%"></textarea>
                <!-- Content ... -->
              </section>
              <footer class="modal-card-foot">
                <button class="button is-success" @click="sendNews()">提交</button>
                <button class="button" @click="hideSubmit()">取消</button>
              </footer>
            </div>

            <button class="modal-close is-large" aria-label="close" @click="hideSubmit()"></button>
          </div>

          <div class="columns">
            <div class="column is-8">

              <div class="level">
                <div class="level-item"></div>
                <div class="level-item"></div>
                <div class="level-item"></div>
                <div class="level-item"> 
                  <div class="button is-primary is-outlined" @click="showSubmit()"> 提交快讯 </div>
                </div>
              </div>

              <div v-for="item in news_list" style="padding-top: 1rem;">
                <NewComponent :item="item"></NewComponent>
              </div>
            </div>

            <div class="column is-4">
              <RightAd> </RightAd>

              </div>
            </div>
          </div>
        </div>
    </div>
</template>

<script>
    import PulseLoader from 'vue-spinner/src/PulseLoader';
    import API, { eos, currentEOSAccount } from '@/util/api';
    import swal from 'sweetalert';
    import RightAd from '@/components/RightAd';
    import NewComponent from '@/components/NewComponent';

    export default {
        name: 'index',
        components: {
            PulseLoader,
          RightAd,
          NewComponent
        },

        data() {
            return {
                tokenPrice: [],
                news_list: [],
                loading: true,
            };
        },

        computed: {},

        async created() {
          this.news_list = await API.getNewsList();
          this.updateNews();
          this.loading = false;
        },

        methods: {
          showSubmit() {
            $("#submit-modal").addClass("is-active");
          },
          async sendNews() {
            const content = $("#post-content").val();
            const title = $("#post-title").val();
            const result = await API.sendNews(title, content);
            if (result.err_code == 0) {
              swal("发送成功", "谢谢你对ydapp做出的贡献", "success");
              $("#post-content").val("");
              this.hideSubmit();
            } else {
              swal("发送失败 ", result.err_msg, "error");
            }
          },
          hideSubmit() {
            $("#submit-modal").removeClass("is-active");
          },
          timestampToStr(timestamp) {
              timestamp += 8*60*60;
              var result = new Date(parseInt(timestamp) * 1000).toISOString().replace('T', ' ').slice(10,16);
              return result;
          },
          async updateNews() {
            function sleep(ms) {
              return new Promise(resolve => setTimeout(resolve, ms));
            }
            for (var i=0;i<1000;i++) {
              await sleep(5000);
              this.news_list = await API.getNewsList();
            }
          }
        },
        watch: {},
    };
</script>
<style scoped>
    .loader-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
    }
    .main-container {
      padding-top: 1rem;
      background-color: #333742;
    }
    .card {
        border:0.5px solid grey;
        border-radius: 2px;
        padding: 10px;
    }
    pre {
      padding: 0.1rem;
      white-space: pre-wrap;
      word-wrap: break-word;
    }
    .slim {
      padding-top: 0.1rem;
    }
</style>

